<template>
	<view class="page">
		<button class="upload-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>

		</button>
		<van-cell-group>
			<van-field :model:value="userInfo.nickName" @change="({detail})=>userInfo.nickName = detail"
				input-align="right" label="昵称" placeholder="请输入昵称" :border="false" />
			<van-field :model:value="userInfo.name" @change="({detail})=>userInfo.name = detail" input-align="right"
				label="姓名" placeholder="请输入姓名" :border="false" />
			<van-field :model:value="userInfo.gender" label="性别" placeholder="请输入性别" input-align="right" :border="false"
				@click-input="showSex=true" readonly />
			<van-field @change="({detail})=>userInfo.phoneNo = detail" input-align="right"
				:model:value="userInfo.phoneNo" label="手机号" placeholder="请输入手机号" required :border="false" />
			<van-field label="生日" input-align="right" :model:value="userInfo.birthday" readonly placeholder="请选择生日"
				:border="false" @click-input="showBirthday=true;" />
		</van-cell-group>
		<view class="bottom-picker" v-show="showSex">
			<van-picker :columns="['男','女']" @confirm='confirmSex' show-toolbar />
		</view>
		<view class="bottom-picker" v-show="showBirthday">
			<!-- <van-picker :columns="['男','女']" show-toolbar /> -->
			<van-datetime-picker :min-date="minDate" :max-date="maxDate" type="date" @confirm='confirmBirthday' />
		</view>

		<view class="bottom-picker btn">
			<van-button type="primary" color="#1989fa" block round @click='edit'>保存</van-button>
		</view>
	</view>
</template>

<script>
	import {
		addUserInfo
	} from '../../common/http/api.js'
	import moment from 'moment';
	export default {
		data() {
			return {
				userInfo: {},
				showSex: false,
				showBirthday: false,
				maxDate: moment().valueOf(),
				minDate: moment('1980-01-01 00:00:00'),
				avatarUrl: '../../static/icons/avatar.png'
			}
		},
		methods: {

			confirmBirthday({
				detail
			}) {

				this.userInfo.birthday = moment(detail).format('YYYY-MM-DD');
				this.showBirthday = false
			},
			confirmSex({
				detail
			}) {
				this.userInfo.gender = detail.value;
				this.showSex = false
			},
			onChooseAvatar(e) {

				const {
					avatarUrl
				} = e.detail;
				// const imgBase64 = uni.getFileSystemManager().readFileSync(avatarUrl, 'base64');
				// this.avatarUrl = 'data:image/png;base64,' + imgBase64;
				// this.formData.file = avatarUrl
			},
			edit() {
				addUserInfo(this.userInfo).then(res => {
					if (res.code == "000") {
						uni.showToast({
							title: "修改成功"
						})
						this.$store.commit("setUserInfo", this.userInfo)
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
			}
		},
		onLoad() {
			this.userInfo = this.$store.state.userInfo
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f0f0f5;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 5vh;
	}

	.bottom-picker {
		position: fixed;
		bottom: 0;
		width: 100vw;
	}


	.upload-avatar {
		background-color: unset;
		font-size: 32rpx;
		// margin-top: ;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #f00212;
		margin-bottom: 5vh;

		.avatar {
			border-radius: 50%;
			width: 280rpx;
			height: 280rpx;
		}
	}

	button::after {
		border: none;
	}

	.btn {
		box-sizing: border-box;
		padding: 30rpx;
	}
</style>